<!DOCTYPE html>
<html style="height: auto; min-height: 100%;">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>template</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/static/js/plugins/bootstrap3/3.3.7/css/bootstrap.min.css">
  <link type="text/css" rel="stylesheet" href="/static/js/plugins/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/js/plugins/Ionicons/2.0.0/css/ionicons.min.css">
  <link rel="stylesheet" href="/static/js/plugins/adminlte/2.4.2/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/static/js/plugins/adminlte/2.4.2/css/skins/skin-blue.min.css" disabled>
  <link rel="stylesheet" href="/static/js/plugins/adminlte/2.4.2/css/skins/skin-blue-light.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>

<body class="hold-transition skin-blue-light" style="height: auto; min-height: 100%;">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <!-- box-primary box-info box-warning box-success box-danger box-solid -->
        <div class="box box-solid">
          <div class="box-header with-border">
            <h3 class="box-title">高级表单</h3>
            <div class="box-tools pull-right">
              <!-- Buttons, labels, and many other things can be placed here! -->
              <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                <i class="fa fa-minus"></i>
              </button>
              <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
                <i class="fa fa-times"></i>
              </button>
            </div>
            <!-- /.box-tools -->
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="row">
              <div class="col-sm-6 col-sm-offset-3">

                <form role="form">
                  <div class="form-group">
                    <label for="">普通文本</label>
                    <input type="text" class="form-control" id="" placeholder="Input field">
                  </div>
                  <div class="form-group">
                    <label for="">email</label>
                    <div class="input-group">
                      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-envelope"></span>
                      </span>
                      <input type="email" class="form-control" id="" placeholder="Input field">
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="">url</label>
                    <div class="input-group">
                      <span class="input-group-addon">
                        <i class="fa fa-link"></i>
                      </span>
                      <input type="url" class="form-control" id="" placeholder="Input field">
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="">日期</label>
                    <div class="input-group date" name="datepicker">
                      <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </span>
                      <input type="text" class="form-control" id="" placeholder="Input field">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="">日期范围</label>
                    <div class="input-group input-daterange">
                      <input type="text" class="form-control" value="2012-04-05">
                      <div class="input-group-addon">to</div>
                      <input type="text" class="form-control" value="2012-04-19">
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="">时间</label>
                    <div class="input-group">
                      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                      </span>
                      <input type="text" class="form-control" data-role="timepicker" placeholder="Input field">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="">日期时间</label>
                    <div class="input-group date">
                      <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </span>
                      <input type="text" class="form-control" id="" data-role="datetimepicker" placeholder="Input field">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="">switch开关</label>
                    <input type="checkbox" name="bsSwitch" id="" placeholder="Input field">
                    <!-- <div class="checkbox">
                      <label>
                        <input type="checkbox" name="bsSwitch">
                      </label>
                    </div> -->
                  </div>
                  <div class="form-group">
                    <label>
                      <input type="checkbox" name="icheck">iCheck控件
                    </label>
                  </div>

                  <div class="form-group">
                    <label for="">redio</label>
                    <div class="input-group">
                      <span class="input-group-addon">
                        <i class="fa fa-shield"></i>
                      </span>
                      <input type="url" class="form-control" id="" placeholder="Input field">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="">文本域</label>
                    <div class="input-group">
                      <span class="input-group-addon">
                        <!-- <span class="glyphicon glyphicon-pencil"></span> -->
                        <i class="fa fa-pencil"></i>
                      </span>
                      <textarea name="" id="" class="form-control" cols="30" rows="3" style="resize: vertical;"></textarea>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="">select</label>
                    <div class="input-group">
                      <span class="input-group-addon">
                        <i class="fa fa-money" aria-hidden="true"></i>
                      </span>
                      <select class="form-control" id="" placeholder="Input field">
                        <option value="1">$</option>
                        <option value="2">#</option>
                      </select>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="">select2</label>
                    <div class="input-group">
                      <span class="input-group-addon">
                        <i class="fa fa-money" aria-hidden="true"></i>
                      </span>
                      <select class="form-control" id="" placeholder="Input field">
                        <option value="1">$</option>
                        <option value="2">#</option>
                      </select>
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary">Submit</button>
                </form>
              </div>
            </div>

          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            The footer of the box
          </div>
          <!-- box-footer -->
          <!-- loading state if you need -->
          <!-- <div class="overlay">
                <i class="fa fa-refresh fa-spin"></i>
            </div> -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container-fluid -->

  <script src="/static/js/plugins/jquery/1.12.4/js/jquery.min.js"></script>
  <script src="/static/js/requirejs/js/require.min.js"></script>
  <script src="/static/js/initiator.js"
   data-env-mode="dev" data-base-url="/static/js" data-custom-entry="../example/form/form"></script>
  <script src="/static/js/plugins/bootstrap3/3.3.7/js/bootstrap.min.js"></script>
  <script src="/static/js/plugins/adminlte/2.4.2/js/adminlte.min.js"></script>
</body>

</html>
